<template>
    <div>
        <el-table :data="tableData" style="width: 100%" height="350" border :header-cell-style="{background:'#f5f7fa',color:'#606266'}"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" ></el-table-column>
            <el-table-column  
                v-for="item in tableList" 
                :key="item.key" 
                :prop="item.propName" 
                :label="item.labelName" 
                :width="item.width" 
                :type="item.type"
                :show-overflow-tooltip="item.showToolTip"
               
                >
                <template slot="header">
                    {{M2(item.labelName)}}
                </template>
                <template slot-scope="scope" >
                    <div v-if="item.formatter">
                        {{$moment(scope.row[item.propName]).format("YYYY-MM-DD HH:mm:ss")}}
                    </div>
                    <div v-else>
                        {{scope.row[item.propName]}}
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name:'commonTable',
    data(){
        return {
            multipleSelection:[],
        }
    },
    props:{
        tableData:{
            type:Array,
            default:() => ([])
        },
        tableList:{
            type:Array,
            default:() => ([])
        },   
    },
    methods:{
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit('getSelectionChange',val)
        },
    }
}
</script>
<style scoped lang="scss">
</style>
